/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useImperativeHandle, useState } from 'react'
import { IAction, IModalProp } from '../../../types/modal'
import { Menu, Role } from '../../../types/api'
import { Form, message, Modal, Tree } from 'antd'
import { useForm } from 'antd/es/form/Form'
import roleApi from '../../../api/roleApi'
import api from '../../../api/api'
// import mockData from '../../../../mock/deptList.json'
export default function SetPermission(props: IModalProp<Role.RoleItem>) {
  const [form] = useForm()
  const [action, setAction] = useState<IAction>('create')
  const [visible, setVisible] = useState(false)
  const [checkedKeys, setCheckedKeys] = useState<string[]>([])
  const [menuList, setMenuList] = useState<Menu.MenuItem[]>([])

  const [roleInfo, setRoleInfo] = useState<Role.RoleItem>()
  const [permission, setPermission] = useState<Role.Permission>()

  useEffect(() => {
    getMenuList()
  }, [])
  const getMenuList = async () => {
    const data = await api.getMenuList()
    setMenuList(data)
  }
  //   const getRoleList = async () => {
  //     const data = await api.getRoleList(form.getFieldsValue())
  //     setRoleList(data)
  //   }
  //   const getAllUserList = async () => {
  //     const data = await api.getAllUserList()
  //     setUserList(data)
  //   }
  useImperativeHandle(props.mRef, () => {
    return {
      open
    }
  })
  //打开弹框
  const open = (type: IAction, data?: Role.RoleItem) => {
    // getRoleList()
    console.log(data)

    setAction(type)
    setVisible(true)
    setRoleInfo(data)
    setCheckedKeys(data?.permissionList.checkedKeys || [])
  }
  //关闭弹框
  const handleCancel = () => {
    setVisible(false)
    setPermission(undefined)
  }
  const onCheck = (checkedKeysValue: any, item: any) => {
    setCheckedKeys(checkedKeysValue)
    const checkedKeys: string[] = []
    const parentKeys: string[] = []
    item.checkedNodes.map((node: Menu.MenuItem) => {
      if (node.menuType === 2) {
        checkedKeys.push(node._id)
      } else {
        parentKeys.push(node._id)
      }
    })
    setPermission({
      _id: roleInfo?._id || '',
      permissionList: {
        checkedKeys,
        halfCheckedKeys: parentKeys.concat(item.halfCheckedKeys)
      }
    })
  }
  const handleOk = async () => {
    if (permission) {
      await roleApi.updatePermission(permission)
      message.success('权限设置成功')
      handleCancel()
      props.update()
    }
  }
  return (
    <Modal
      title={action === 'create' ? '创建角色' : '编辑角色'}
      okText='确定'
      cancelText='取消'
      width={800}
      open={visible}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <Form form={form} labelCol={{ span: 4 }} labelAlign='right'>
        <Form.Item label='角色名称' name='roleName' rules={[{ required: true, message: '请输入角色名称' }]}>
          {roleInfo?.roleName}
        </Form.Item>
        <Form.Item label='权限' name='permission'>
          <Tree
            checkable
            onCheck={onCheck}
            checkedKeys={checkedKeys}
            treeData={menuList}
            defaultExpandAll
            fieldNames={{ title: 'menuName', key: '_id', children: 'children' }}
          />
        </Form.Item>
      </Form>
    </Modal>
  )
}
